<template>
  <div class="hotel-info">
    <headers></headers>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 图片轮播和基本信息 -->
      <div class="info-container">
        <div class="carousel-section">
          <el-carousel height="500px" indicator-position="outside">
            <el-carousel-item v-for="(item,index) in info.images.split(',')" :key="index">
              <img :src="item" alt="酒店图片">
            </el-carousel-item>
          </el-carousel>
        </div>
        
        <div class="info-section">
          <h1 class="hotel-name">{{info.name}}</h1>
          <div class="hotel-meta">
            <div class="meta-item">
              <i class="el-icon-location"></i>
              <span>所属景区：{{info.attractions}}</span>
            </div>
            <div class="meta-item">
              <i class="el-icon-map-location"></i>
              <span>地址：{{info.address}}</span>
            </div>
          </div>
          <div class="description">{{info.introduce}}</div>
          <div class="action-buttons">
            <el-button type="primary" icon="el-icon-date" @click="toOrder">立即预定</el-button>
          </div>
        </div>
      </div>

      <!-- 酒店设施和服务 -->
      <div class="details-card">
        <el-card>
          <div class="detail-section">
            <h3><i class="el-icon-house"></i> 酒店设施</h3>
            <div class="facilities-grid">
              <div class="facility-item" v-for="(facility, index) in info.facilities ? info.facilities.split(',') : []" :key="index">
                <i class="el-icon-check"></i>
                <span>{{facility}}</span>
              </div>
            </div>
          </div>
          <div class="detail-section">
            <h3><i class="el-icon-info"></i> 入住须知</h3>
            <div class="notice-content">
              <p>入住时间：14:00后 | 退房时间：12:00前</p>
              <p>需要携带有效身份证件办理入住</p>
              <div v-if="info.notice" v-html="info.notice.replace(/\n/g, '<br>')"></div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 预定弹窗 -->
    <el-dialog
      title="预定房间"
      :visible.sync="dialogVisible"
      width="600px"
      custom-class="booking-dialog">
      <div class="booking-form">
        <!-- 房型选择 -->
        <div class="form-section room-selection">
          <h3 class="section-title">选择房型</h3>
          <div class="room-options">
            <el-radio-group v-model="radio1" class="radio-group">
              <el-radio 
                v-for="(item,index) in hotel" 
                :key="index" 
                :label="item.id" 
                class="radio-item">
                <div class="room-info">
                  <div class="room-name">{{item.name}}</div>
                  <div class="room-meta">
                    <span class="room-inventory">剩余：{{item.num}}间</span>
                    <span class="room-price">¥{{item.price}}/晚</span>
                  </div>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
        </div>

        <!-- 预定信息 -->
        <div class="form-section booking-details">
          <h3 class="section-title">预定信息</h3>
          <el-form :model="bookingForm" label-width="100px">
            <el-form-item label="预定天数">
              <el-input-number 
                v-model="num" 
                :min="1" 
                :max="10"
                size="small"
                class="custom-number-input">
              </el-input-number>
            </el-form-item>
            
            <el-form-item label="入住日期">
              <el-date-picker
                v-model="date1"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择入住日期"
                :picker-options="{
                  disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                  }
                }"
                size="small"
                class="custom-date-picker">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>

        <!-- 入住人信息 -->
        <div class="form-section guest-info">
          <h3 class="section-title">入住人信息</h3>
          <el-form 
            :model="people" 
            :rules="rules"
            ref="peopleForm"
            label-width="100px" 
            size="small" 
            class="guest-form">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="people.name" placeholder="请输入姓名" class="custom-input"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input 
                v-model="people.tel" 
                placeholder="请输入11位手机号" 
                maxlength="11"
                show-word-limit
                class="custom-input">
              </el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input 
                v-model="people.idCard" 
                placeholder="请输入18位身份证号" 
                maxlength="18"
                show-word-limit
                class="custom-input">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeOrder" plain>取 消</el-button>
        <el-button type="primary" @click="saveOrder">确认预定</el-button>
      </div>
    </el-dialog>

    <bottoms></bottoms>
  </div>
</template>

<script>
  import {getSysHotelById,getSysHotelItemList,saveSysHotelOrder} from '../../api/api'
  import headers from '@/components/header'
  import bottoms from '@/components/bottom'
  export default {
    data() {
      // 手机号验证规则
      const validatePhone = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入手机号'));
        } else if (!/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的11位手机号'));
        } else {
          callback();
        }
      };
      
      // 身份证号验证规则
      const validateIdCard = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入身份证号'));
        } else if (!/^\d{17}[\dXx]$/.test(value)) {
          callback(new Error('请输入正确的18位身份证号'));
        } else {
          callback();
        }
      };

      return{
        id: "",
        dialogVisible: false,
        content: "",
        date1: "",
        num: 1,
        people:{
            name: "",
            tel: "",
            idCard: ""
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          tel: [
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          idCard: [
            { required: true, validator: validateIdCard, trigger: 'blur' }
          ]
        },
        info: {},
        hotel: [],
        radio1: ""
      }
    },
    components: {
      headers,
      bottoms
    },
    methods: {
      getSysHotelItemList() {
        getSysHotelItemList({id:this.id}).then(res => {
          if (res.code == 1000) {
            this.hotel = res.data
          }
        })
      },
      closeOrder() {
        this.date1 = ""
        this.num = 1
        this.radio1 = ''
        this.people = {
          name: "",
          tel: "",
          idCard: ""
        }
        this.dialogVisible = false
      },
      saveOrder() {
          this.$refs.peopleForm.validate((valid) => {
            if (valid) {
              if (!this.date1) {
                this.$message({
                    message: '请选择预约时间',
                    type: 'warning'
                });
                return
              }
              if (!this.radio1) {
                this.$message({
                    message: '请选择房型',
                    type: 'warning'
                });
                return
              }
              var param = {
                hotelId: this.id,
                num: this.num,
                itemId: this.radio1,
                time: this.date1,
                people: JSON.stringify(this.people)
              }
              saveSysHotelOrder(param).then(res => {
                  if (res.code == 1000) {
                    this.$message({
                        message: '预约成功，请等待确认',
                        type: 'success'
                    });
                    this.closeOrder()
                  } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                  }
              })
            }
          });
      },
      getSysHotelById() {
        getSysHotelById({id:this.id}).then(res => {
          if (res.code == 1000) {
            this.info = res.data
          }
        })
      },
      toOrder() {
        this.dialogVisible = true
      },
    },
    mounted() {
      this.id = this.$route.query.id
      this.getSysHotelById()
      this.getSysHotelItemList()
    }
 }
</script>

<style scoped>
.hotel-info {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 轮播图和基本信息布局 */
.info-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  margin-bottom: 30px;
}

.carousel-section {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.carousel-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 基本信息样式 */
.info-section {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.hotel-name {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
}

.hotel-meta {
  margin: 20px 0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #606266;
}

.meta-item i {
  color: #409EFF;
}

.description {
  color: #606266;
  line-height: 1.6;
  margin: 20px 0;
}

.action-buttons {
  margin-top: 30px;
}

/* 详细信息卡片样式 */
.details-card {
  margin-top: 20px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

.detail-section i {
  margin-right: 8px;
  color: #409EFF;
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.facility-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.facility-item i {
  margin-right: 8px;
  color: #67c23a;
}

.facility-item span {
  color: #606266;
}

.notice-content {
  color: #606266;
  line-height: 1.6;
}

.notice-content p {
  margin-bottom: 10px;
}

/* 预定弹窗样式 */
:deep(.booking-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.booking-dialog .el-dialog__header) {
  background: #f8f9fa;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

:deep(.booking-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.booking-dialog .el-dialog__body) {
  padding: 30px;
}

:deep(.booking-dialog .el-dialog__footer) {
  border-top: 1px solid #eee;
  padding: 15px 30px;
}

.booking-form {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}

.booking-form::-webkit-scrollbar {
  width: 6px;
}

.booking-form::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.form-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.form-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 20px 0;
}

/* 房型选择样式 */
.room-options {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 5px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.radio-item {
  margin: 0;
  padding: 15px;
  width: 100%;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.radio-item:hover {
  background: #fff;
}

:deep(.radio-item.is-checked) {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.room-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-left: 10px;
}

.room-name {
  font-size: 15px;
  color: #2c3e50;
  font-weight: 500;
}

.room-meta {
  display: flex;
  align-items: center;
  gap: 15px;
}

.room-inventory {
  color: #666;
  font-size: 14px;
}

.room-price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 600;
}

/* 表单样式 */
:deep(.custom-input .el-input__inner) {
  border-radius: 4px;
  height: 36px;
}

:deep(.custom-number-input .el-input__inner) {
  width: 120px;
}

:deep(.custom-date-picker) {
  width: 100%;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #2c3e50;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .info-container {
    grid-template-columns: 1fr;
  }
  
  .info-section {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 10px;
  }
  
  :deep(.booking-dialog) {
    width: 90% !important;
    margin: 0 auto;
  }
  
  :deep(.booking-dialog .el-dialog__body) {
    padding: 20px;
  }

  .room-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .room-meta {
    width: 100%;
    justify-content: space-between;
  }
}
</style>